<link href="<?=PLANTILLA_BASE_URL?>/css/mainStyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script type="text/javascript" src="<?=PLANTILLA_BASE_URL?>/js/jqFancyTransitions.js"></script>
<div id="wrapper" style="margin-top:0; z-index:500;">
	<style type="text/css">
	.portada {
		display:block;
		position:relative;
	}
	</style>
    <div id="content-veg" class="portada">
		<h2 style="color:#fafafa; padding:30px 0 0 30px;">VERDURAS</h2>
        <p style="font-size:0.95em; color:#f3f3f3;" class="box-text">Listado de las verduras que hay en Argentina, por orden
		alfab&eacute;tico con sus respectivas propiedades, minerales, vitaminas. Y los nombres con que se las conocen
		en otros pa&iacute;ses latinoamericanos y Espa&ntilde;a</p><a href="verduras.php" style="padding-left:30px; margin-top:-120px; position:absolute;">ENTRAR >></a>
		
		<div style="width: 400px; height: 268px; position: relative; background-position: right top; margin-top:-275px;" id="example">
<?php foreach($this->getData("verdura",array()) as $v):?>
				<img style="display: none;" src="<?=$v['url']?>" alt="<?=$v['nombre']?>" />
<?php endforeach;?>
		</div>
		<script>
		$('#example').jqFancyTransitions({
			width: 400,	height: 260,position: 'curtain' 
		});
		
		</script>
    </div><!--end content-veg-->

<style type="text/css">
.portada_centro{
	background-image: url("<?=PLANTILLA_BASE_URL?>/img/bg-center.jpg");
    display: table;
    width: 100%;
	position:relative;
}
.bloque{
	width:33%;
	display:table-cell;
	
}
.btns{
	background-color: #BABABA;
    border-radius: 14px 14px 14px 14px;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.8);
    display: block;

    display: block;
    height: 100px;
    margin: 20px auto;
    width: 150px;
}
.btns h3{}
</style>
	<section class="portada_centro">
		<div class="bloque">
			<div class="btns">
				<h3>Carnes</h3>
				<h5></h5>
			</div>
		</div>
		<div class="bloque">
			<div class="btns">
				<h3>Pescados</h3>
				<h5></h5>
			</div>
		</div>
		<div class="bloque">
			<div class="btns">
				<h3>Quesos</h3>
				<h5></h5>
			</div>
		</div>
	</section>
	<!--<section id="center">
      <div class="btns"><h3 style="width:150px; color:#f4f4f4; text-align:center;">Carnes</h3><h5 style="width:200px; margin-top:-8;">Pr&oacute;ximamente</h5></div>
	  <div class="btns" style="margin-left:400px;"><h3 style="width:150px; color:#f4f4f4; text-align:center;">Pescados</h3><h6 style="width:200px; margin-top:-8;">Pr&oacute;ximamente</h6></div>
	  <div class="btns" style="margin-left:760px;"><h3 style="width:150px; color:#f4f4f4; text-align:center;">Quesos</h3><h6 style="width:200px; margin-top:-8;">Pr&oacute;ximamente</h6></div>
    </section>
	--> 
    <div id="content-fruit">
		<div id="ftHolder">
			<div style="width: 400px; height: 268px; position: relative; background-position: left middle;" id="ft">
<?php foreach($this->getData("fruta",array()) as $f):?>
				<img style="display: none;" src="<?=$f['url']?>" alt="<?=$f['nombre']?>">
<?php endforeach;?>
			</div>
		</div><!--end ftHolder-->

		<!--<br clear="all">-->
		<script>
			$('#ft').jqFancyTransitions({ width: 400,	height: 260, navigation: false, links : false });
		</script>
		<div class="box-text0">
			<h2 style="margin-top:40px; padding-left:260px; color:#fafafa;">FRUTAS</h2>
			<p style="font-size:0.95em; color:#f3f3f3; text-align:right;">Con el mismo criterio que las verduras aqu&iacute; hallar&aacute; un listado en orden alfab&eacute;tico con informaci&oacute;n de inter&eacute;s sobre las frutas, con sus respectivas propiedades y los nombres con las que se las conocen en otros pa&iacute;ses hispanoparlantes.</p>
			<a href="fruits.php" style="padding-left:260px;">ENTRAR >></a>
		</div><!--end box-text0-->
	</div><!--end content-fruit-->
 </div><!--end wrapper-->